<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getArticleById } from '@/api/article' // 假设有获取单篇文章的API

const route = useRoute();

const articles = ref({
    id:'',
    title:'',
    content:'',
    coverImg:'',
    state:'',
    categoryId:'',
    createTime:'',
    likeCount:''
})

const comments = ref({})

import { CategoryListService } from '@/api/category';

const categorys = ref([])

//查询所有的分类
const categoryList = async () => {
    let result = await CategoryListService();
    categorys.value = result.data;
}
categoryList();

onMounted(async () => {
    const articleId = route.params.id
    let response = await getArticleById(articleId);
    console.log(response.data);
    
    articles.value = response.data

    // 如果需要分类名称，可以像首页一样匹配
    // 或者让后端直接返回分类名称
    for (let i = 0; i < articles.value.length; i++) {
        let article = articles.value[i];
        for (let j = 0; j < categorys.value.length; j++) {
            let category = categorys.value[j];
            if (article.categoryId === category.id) {
                article.categoryName = category.categoryName;
            }
        }
    }
})

const likeArticle = () => {
  articles.value.likeCount++
}

</script>

<template>
  <div class="article-detail-container">
    <div class="header">
      <h1>{{ articles.title }}</h1>
      <div class="meta">
        <span><i class="fa fa-calendar"></i> {{ articles.createTime }}</span>
        <span><i class="fa fa-folder"></i> {{ articles.categoryName }}</span>
      </div>
    </div>
    
    <div class="cover-img-container">
      <img :src="articles.coverImg" alt="封面图" class="cover-img" v-if="articles.coverImg">
    </div>
    
    <div class="content" v-html="articles.content"></div>
    
    <div class="actions">
      <button class="like-btn" @click="likeArticle">
        <i class="fa fa-thumbs-up"></i> 点赞 ({{ articles.likeCount }})
      </button>
      <router-link to="/home" class="back-btn">
        <i class="fa fa-arrow-left"></i> 返回首页
      </router-link>
    </div>
    
    <div class="comments-section">
      <h3><i class="fa fa-comments"></i> 评论 ({{ comments.length }})</h3>
      <div class="comment-list">
        <div class="comment" v-for="(comment, index) in comments" :key="index">
          <div class="avatar">
            <img :src="comment.avatar" alt="用户头像">
          </div>
          <div class="comment-content">
            <div class="comment-header">
              <span class="username">{{ comment.username }}</span>
              <span class="time">{{ comment.time }}</span>
            </div>
            <div class="comment-text">{{ comment.content }}</div>
          </div>
        </div>
      </div>
      <div class="add-comment">
        <textarea v-model="newComment" placeholder="写下你的评论..."></textarea>
        <button @click="addComment">发表评论</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.article-detail-container {
  max-width: 700px;
  margin: 0 auto;
  padding: 30px 20px;
  background-color: white;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

.header h1 {
  font-size: 2.2rem;
  color: #333;
  margin-bottom: 15px;
}

.meta {
  color: #666;
  font-size: 0.95rem;
}

.meta span {
  margin: 0 15px;
}

.cover-img-container {
  margin: 25px 0;
  text-align: center;
}

.cover-img {
  max-width: 100%;
  max-height: 500px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.content {
  line-height: 1.8;
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 40px;
}

.actions {
  display: flex;
  justify-content: space-between;
  margin: 40px 0;
}

.like-btn, .back-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
}

.like-btn {
  background-color: #eaf5ff;
  color: #1890ff;
}

.like-btn:hover {
  background-color: #d4edff;
}

.back-btn {
  background-color: #f5f5f5;
  color: #666;
  text-decoration: none;
}

.back-btn:hover {
  background-color: #e8e8e8;
}

.comments-section {
  margin-top: 50px;
  border-top: 1px solid #eee;
  padding-top: 30px;
}

.comment-list {
  margin: 25px 0;
}

.comment {
  display: flex;
  margin-bottom: 25px;
  padding-bottom: 25px;
  border-bottom: 1px solid #f0f0f0;
}

.avatar {
  width: 50px;
  height: 50px;
  margin-right: 15px;
}

.avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.comment-content {
  flex: 1;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.username {
  font-weight: bold;
  color: #333;
}

.time {
  color: #999;
  font-size: 0.85rem;
}

.comment-text {
  color: #333;
  line-height: 1.6;
}

.add-comment textarea {
  width: 100%;
  height: 120px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 15px;
  font-size: 1rem;
  resize: vertical;
}

.add-comment button {
  padding: 10px 25px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.add-comment button:hover {
  background-color: #40a9ff;
}
</style>